<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //【@】对象字面量的写法变化
        //【1】es5的对象属性写法变化
        const name = 'jane';
        const age = 20;

        //es5
        const person1 = {
            name: name,
            age: age
        };

        //es6
        const person11 = {
            name,
            age
        };

        //【2】模块对外提供接口时候
        const getName = () => person.name;
        const getAge = () => person.age;
        //commonjs的方式
        // module.exports = {
        //     getName,
        //     getAge
        // };
        //es6 modules的方式
        // export default {
        //     getName,
        //     getAge
        // };
        //【3】对象字面量中的方法简写变化
        var person2 = { //es5中的写法
            name: name,
            age: age,
            getName: function getName() {
                return this.name;
            }
        };
        //es6的对象的属性方法的写法
        const person22 = {
            name,
            age,
            getName() { //此处没有使用箭头函数，this还是我们之前理解的this。但是如果使用了箭头函数，则会this发生变化。
                return this.name;
            }
        };
        //【4】对象字面量属性名可以作为一个变量使用了
        const name22 = 'sky';
        const age22 = 20;
        const person3 = {
            [name22]: true, //使用中括号作为属性，此时属性名变成变量，ui框架有大量使用
            [age22]: true
        };
        console.log(person3);
    </script>
</body>

</html>